<template>
	<view class="dx-icon-select-box">
		<el-popover placement="bottom" ref="popperRef" transition="el-zoom-in-top" :teleported="false" width="100%" trigger="click" @before-enter="show" @before-leave="hide">
			<template #reference>
				<el-input readonly v-model="input" placeholder="请选择" :class="{ 'dx-suffix': !!input }">
					<template v-if="!!input" #prefix>
						<dx-icon :name="input" size="16"></dx-icon>
					</template>
					<template #suffix>
						<dx-icon class="direction" :class="{ 'down-up': visible }" name="down" size="18" color="#a8abb2" :strokeWidth="2"></dx-icon>
						<dx-icon class="ml-3px close" name="close-one" size="14" color="#7c7e87" :strokeWidth="2" @click="clearableEvent"></dx-icon>
					</template>
				</el-input>
			</template>
			<template #default>
				<el-scrollbar class="icon-box">
					<view class="flex flex-wrap">
						<el-tooltip :show-after="100" effect="dark" v-for="val in IconParkMapKeys" :key="val" :content="val" placement="top">
							<view class="p-8px dx-select" @click="selectIcon(val)">
								<dx-icon size="25" :name="val"></dx-icon>
							</view>
						</el-tooltip>
					</view>
				</el-scrollbar>
			</template>
		</el-popover>
	</view>
</template>
<script lang="ts" setup name="DxIconSelect">
import { ref, watch } from 'vue';
import { IconParkMapKeys } from '@/uni_modules/dx-admin/common/iconPark';
const props = defineProps<{
	modelValue: any;
}>();
const input = ref('');
const popperRef = ref<any>();
// 监听
watch(props, (newProps) => {
	input.value = newProps.modelValue;
});
// 绑定关系
const $emit = defineEmits(['update:modelValue', 'change']);
const visible = ref(false);
function selectIcon(val: string) {
	input.value = val;
	$emit('update:modelValue', val);
	$emit('change', val);
	popperRef.value.hide();
}
function clearableEvent() {
	input.value = '';
	$emit('update:modelValue', '');
	$emit('change', '');
}
function show() {
	visible.value = true;
}
function hide() {
	visible.value = false;
}
</script>

<style lang="scss">
.dx-icon-select-box {
	width: 100%;
	.icon-box {
		height: 250px;
		overflow-y: auto;
	}
	.down-up {
		transform: rotateZ(-180deg);
		transition: all 0.3s;
	}
	.dx-select {
		border: 1px solid #f6f6f6;
		&:hover {
			border: 1px solid var(--el-color-primary);
		}
	}
	.direction {
		display: block;
	}
	.close {
		display: none;
	}
	.dx-suffix {
		&:hover {
			.direction {
				display: none;
			}
			.close {
				display: block;
			}
		}
	}
}
</style>
